import React, { Suspense } from 'react';
import { HashRouter, Route, Link, Switch } from 'react-router-dom'
import { loadable } from '../utils/util'
// import Login from '../views/login'
// import Layout from '../views/layout'
// const Login = React.lazy(() => import(/*webpackChunkName:"Login" */'../views/login'))
// const Layout = React.lazy(() => import(/*webpackChunkName:"Layout" */'../views/layout'))

const Loading = function () {
  return <h1>loading....</h1>
}



const Login = loadable({
  loader: () => import(/*webpackChunkName:"Login" */'../views/login'),
  loading: function () { return <h2>正在加载login组件</h2> },
});
const Layout = loadable({
  loader: () => import(/*webpackChunkName:"Layout" */'../views/layout'),
  loading: function () { return <h2>正在加载layout组件</h2> },
});

class App extends React.Component {
  render() {
    return <Suspense fallback={<Loading />}>
      <HashRouter className=''>
        <Switch>
          <Route path='/login' component={Login}></Route>
          <Route path='/404' render={() => <h1>404</h1>}></Route>
          <Route path='/' component={Layout}></Route>
        </Switch>
      </HashRouter>
    </Suspense>;
  }
}
export default App